@{
ViewData["Title"] = "我的订单";
var orderList = ViewBag.OrderList ;
var or = ViewBag.PageBar;
var StatusList = new List<string> { "全部", "未付款", "已付款" };
  var currentStatus = ViewBag.CurrentStatus ?? "全部";
  var key=ViewBag.Key;
  var ids=ViewBag.Ids;
  }
<style>
.img-product{
  width:48px;
  height: 48px;
}
</style>
  <div class="row g-2">
    <div class="col-12">
      <h1>@ViewData["Title"]</h1>


      <form class="row g-3 d-flex justify-content-end">

        <div class="col-auto">
          <label for="orderStatus" class="col-form-label">请选择状态：</label>
        </div>
        <div class="col-auto">
          <select id="orderStatus" name="status" class="form-select">
            @foreach (var status in StatusList)
            {
            <option value="@status" selected="@(status == currentStatus)">@status</option>

            }

          </select>
        </div>

      </form>


      <table class="table table-hoverd caption-top">
        <thead>
          <tr class="table-success">
            <th class="text-center" style="width: 120px;">订单日期</th>
            <th class="text-center" style="width: 100px;">订单状态</th>
            <th class="text-end" style="width: 160px;">总价</th>
            <th class="text-center" style="width: 120px;">收货人</th>
            <th class="text-center" style="width: 180px;">收货电话</th>
            <th>收货地址</th>
            <th class="text-center" style="width: 80px;">详情</th>
          </tr>
        </thead>
        <tbody>
          @foreach (var o in orderList)
          {
          <tr>
            <td class="text-center">@o.OrderDate</td>
            <td class="text-center">@o.OrderList</td>
            <td class="text-end">@o.TotalAmount</td>
            <td class="text-center">@o.TakeName</td>
            <td class="text-center">@o.TakePhone</td>
            <td>@o.TakeAddress</td>

            <td class="text-center">
              <button type="button" class="btn btn-sm btn-primary mt-1" data-bs-toggle="modal"
                data-bs-target="#modal-order-detail" data-order-id="@o.OrderId" data-total-amount="@o.TotalAmount"
                data-status-code="@o.StatusCode" onclick="searchOrder('@o.OrderId')">
                <i class="bi bi-search"></i>

              </button>

            </td>
          </tr>
          }
        </tbody>

      </table>
      <tfoot>
        <div class="col-12">
          <ul class="pagination justify-content-end">
            <li class='page-item @(or.Previous == or.CurrentPage ? "disabled" : "")'>
              <a class="page-link btn-page" data-page="@or.Previous" href="javascript:void(0)" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>

            @foreach (var btn in or.ButtonGroup)
            {

            <li class='page-item @(btn == or.CurrentPage ? "active" : "")'>
              <a class="page-link btn-page" href="javascript:void(0)" data-page="@btn">
                @btn
              </a>
            </li>
            }

            <li class='page-item  @(or.Next == or.CurrentPage ? "disabled" : "")'>
              <a class="page-link btn-page" data-page="@or.Next" href="javascript:void(0)" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
      </tfoot>
    </div>
  </div>
  @section CustomModal {
  <div class="modal" tabindex="-1" id="modal-order-detail">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">订单号：</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th style="width: 100px;" class="text-center">图片</th>
              <th>商品名称</th>
              <th style="width: 160px;" class="text-end">价格</th>
              <th class="text-end" style="width: 160px;">数量</th>
              <th class="text-end" style="width: 160px;">小计</th>
            </tr>
          </thead>
          <tbody id="table-order-details">

          </tbody>
          <tfoot>
            <tr>
              <td colspan="4" class="text-end">总计:</td>
              <td class="text-end text-danger">$<span id="span-total-amount">0.00</span></td>
            </tr>
          </tfoot>
        </table>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button id="btn-order-pay" type="button" class="btn btn-danger visually-hidden btn-status" data-order-id=""
            data-status-code="" data-bs-dismiss="modal">付款</button>
          <button id="btn-order-take" type="button" class="btn btn-primary visually-hidden btn-status" data-order-id=""
            data-status-code="" data-bs-dismiss="modal">收货</button>
              <button id="btn-order-remove" type="button" class="btn btn-danger visually-hidden btn-status" data-order-id=""
            data-status-code="" data-bs-dismiss="modal">撤销</button>
        </div>
      </div>
    </div>
  </div>
  }
  @section CustomScript{
<script>
  const handleRemove=function(){
     let obj=$(this);
     let orderId=obj.data("order-id");
     customConfirm("订单删除后将无法恢复，是否继续？",function(){
      $.ajax({
        type: "DELETE",
        url: `/order/${orderId}`,
        success: function (response) {
          customAlert(response,function(){
            let {code}=response;
            if(code==200) location.reload();
          })
        }
      });

     })
  }


    $(document).ready(function () {
        $("#modal-order-detail").on("show.bs.modal", handleOrderDetail);
        $("#btn-order-pay").on("click", handleOrderStatus);
        $("#btn-order-take").on("click", handleOrderStatus);
        $(".btn-page").on("click", handlePage);
        $("#select-status").on("change", handlePage);
    });

    $(document).ready(function () {
        $(".btn-page").on("click", function () {
            var statusCode = $("#statusFilter").val();
            // 获取点击的页码
            var page = $(this).data("page");
            var url = `/order?page=${page}&statusCode=${statusCode}`;
            location.href = url;
        });

        $("#statusFilter").on("change", function () {
            var statusCode = $(this).val();
            var page = 1;
            var url = `/order?page=${page}&statusCode=${statusCode}`;
            location.href = url;
        });
    });
    const handleOrderDetail = function (event) {
        let obj = $(event.relatedTarget);
        let orderId = obj.data("order-id");
        let statusCode = obj.data("status-code");

        $("#modal-order-detail h5.modal-title").text(`订单号:${obj.data("order-id")}`);
        $("#span-total-amount").text(obj.data("total-amount"))
        let btnStautsObj = $(".btn-status");

        //在按钮全部隐藏，并在数据属性中保存值
        btnStautsObj.addClass('visually-hidden');
        btnStautsObj.data("status-code", statusCode).data("order-id", orderId);

        //解锁按钮
        if (statusCode == 1) {
            $("#btn-order-pay").removeClass("visually-hidden");
            $("#btn-order-remove").removeClass("visually-hidden");
        }
        else if (statusCode == 3) {
            $("#btn-order-take").removeClass("visually-hidden");
        }
        //远程获取订单详情数据，并填充表格
      $.ajax({
        type: "get",
        url: `/order/${obj.data("order-id")}/detail`,
        success: function (response) {
          let{code,data}=response;
          if(code!=200)return;
          addNewRow(data);
        }
      });
    };

    const addNewRow=(data)=>{
       $("#table-order-details").empty();
      data.forEach((od) => {
        let newRow=$("<tr>");
        let img=$("<img>").attr("src",`/upload/${od.ownProduct.photo}`).addClass("img-product");
        newRow.append($("<td>").append(img))
        newRow.append($("<td>").text(od.ownProduct.productName).addClass("align-middle"));
        newRow.append($("<td>").text(od.unitPrice).addClass("align-middle text-end"));
        newRow.append($("<td>").text(od.quantity).addClass("align-middle text-end"));
        newRow.append($("<td>").text(od.unitPrice* od.quantity).addClass("align-middle text-end"));
        $("#table-order-details").append(newRow);
      });
    }

    const handleOrderStatus = function () {
        console.log("订单状态操作触发，暂未实现具体业务逻辑");
    };

    const handlePage = function () {
        var statusCode = $("#statusFilter").val();
        var page = $(".btn-page.active").data("page");
        console.log(`当前页码: ${page}，当前状态码: ${statusCode}`);
    };
    $(document).ready(function () {
        $("#modal-order-detail").on("show.bs.modal", handleOrderDetail);
    });


</script>
}
